<template>
  <div id="home" ref="home" @touchstart.passive="touchStartHandler">
    <div ref="stageBox" id="stage-box">
      <div class="indexpage">
        <index />
      </div>
      <div class="secondpage">
        <about v-if="aboutOpen" ref="about" />
      </div>
      <div class="thirdpage">
        <Award v-if="awardOpen" />
      </div>
      <div class="fourthpage">
        <Connect v-if="showOpen" />
      </div>
    </div>
  </div>
</template>

<script>
  import Index from './components/Index'
  import Award from './components/Award'
  import Connect from './components/Connect'
  import About from './components/about/About'

  import {throttle} from '@MYPLUGIN/throttle'
  import {
    constants
  } from 'fs';
  export default {
    name: 'App',
    components: {
      Index,
      Award,
      Connect,
      About
    },
    mounted() {},
    data() {
      return {
        aboutOpen: false,
        awardOpen: false,
        showOpen: false,
        deg: 0
      }
    },
    //挂载变量以便对象内部使用
    created() {
      
      this.slideAnmiation = {
        //点击开始位置
        startPos: null,
        //确定当前方向的值
        currentDirection: null,
        //移动的位置
        endPos: null,
        //旋转角度
        deg: 0
      }
      //节流和防抖 处理
      this.touchMoveHandler = throttle(this.touchMoveHandler, 75)
    },
    methods: {
      touchStartHandler(event) {
        //touches数组对象获得屏幕上所有的touch，取第一个touch
        var touch = event.targetTouches[0];
        //保存起始位置
        this.slideAnmiation.startPos = {
          x: touch.pageX,
          y: touch.pageY,
          time: +new Date
        }; //取第一个touch的坐标值
        //注意这里的函数做过处理 touchMoveHandler
        home.addEventListener('touchmove',this.touchMoveHandler , false)
        home.addEventListener('touchend', this.touchEndHandler, false)
      },

      touchMoveHandler(event) {
        //当屏幕有多个touch或者页面被缩放过，就不执行move操作
        if (event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
        //touches数组对象获得屏幕上所有的touch，取第一个touch
        var touch = event.targetTouches[0];
        //便于访问,保存变量
        var endPos = this.slideAnmiation.endPos = {
          x: touch.pageX - this.slideAnmiation.startPos.x,
          y: touch.pageY - this.slideAnmiation.startPos.y
        };  
        //判断是横划，还是竖划
        var currentDirection = this.slideAnmiation.currentDirection =
          (Math.abs(endPos.x) < Math.abs(endPos.y)) ? 'vertical' : 'horizontal';

        //横划 要阻止默认的行为 ????
        if (currentDirection === 'vertical') {
          event.preventDefault()
        }
      },
      touchEndHandler(event) {
        //承接对象，便于访问
        var slideAnmiation = this.slideAnmiation;
        //滑动的持续时间
        var duration = +new Date - slideAnmiation.startPos.time;

        //不动(移动)
        if (!slideAnmiation.endPos) return
  
        if (slideAnmiation.currentDirection === 'horizontal' && Math.abs(slideAnmiation.endPos.x) > 50) { 
          //当为水平滚动时
          if (duration > 10) {
            //判断是左移还是右移，当偏移量大于10时执行
            if (slideAnmiation.endPos.x > 10) {
              this.slideAnmiation.deg += 90
            } else if (slideAnmiation.endPos.x < -10) {
              this.slideAnmiation.deg -= 90
            }
            judegRotate.call(this, this.slideAnmiation.deg)

            function judegRotate(deg) {
              var indexDeg = deg % 360

              if (!this.aboutOpen && (indexDeg == -90 || indexDeg == 270)) { //加载aboutamend页面
                this.aboutOpen = true;
                setTimeout(() => {
                  About.methods.wordAnmiS()
                }, 500)
              }

              if (!this.awardOpen && (indexDeg == -180 || indexDeg == 180)) //加载award页面
              {
                this.awardOpen = true
              }
              if (!this.showOpen && (indexDeg == -270 || indexDeg == 90)) //加载show页面
              {
                this.showOpen = true
              }
              var stageBox = this.$refs.stageBox
              var stageBoxs = stageBox.children
              var stageBoxsLen = stageBoxs.length
              for (let i = 0; i < stageBoxsLen; i++) {
                stageBoxs[i].style.transform = 'rotateY(' + (this.slideAnmiation.deg + 90 * i) + 'deg) translateZ(50vw)'
              }
              //  旋转后要进行清算 ,避免直接点击翻转
              this.slideAnmiation.currentDirection = null;
              this.slideAnmiation.endPos = null;
            }
          }
        } else {
          // event.preventDefault()
        }
        //解绑事件
        home.removeEventListener('touchmove', this.touchMoveHandler, false);
        home.removeEventListener('touchend', this.touchEndHandler, false);
      }
    },
  }

</script>

<style src='@STATIC/css/home.css' />

<style>
  #stage-box{
    height: 100vh;
    width: 100%;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: all 0.5s ease-in-out;
  }
</style>
